<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>开关 Flip toggle switches--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/form/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>开关 Flip toggle switches</h1>
				<div class="desc">
                <div>开关在移动设备上是一个常用的ui元素，用来二元的切换开/关或者输入true/false类型的数据。你可以像滑动框一样拖动开关，或者点击开关任意一半进行操作</div> 
                <div>创建一个只有2个option的选择菜单就可以构造一个开关了。第一个option会被样式化为 开，第二个option会被样式化为 关，所以请注意代码书写顺序。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性。</div> 
</div>
                
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>&lt;div data-role=&quot;fieldcontain&quot;&gt;<br />	&lt;label for=&quot;slider&quot;&gt;Select slider:&lt;/label&gt;<br />	&lt;select name=&quot;slider&quot; id=&quot;slider&quot; data-role=&quot;slider&quot;&gt;<br />		&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;<br />		&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;<br />	&lt;/select&gt; <br />&lt;/div&gt;</pre>
</div>
 	<p class="indent"><strong>开?Flip toggle switches</strong></p>
	<img src="../../images/form element/switch.png" tppabs="http://www.jqmapi.com/images/form%20element/switch.png">
<hr /> 
<h1>刷新开关 Refreshing a flip switch</h1>
				<div class="desc">
                <div>如果你想通过js手动控制开关，务必调用 refresh 方法刷新样式</div> 
				<div class="code">
				  <pre>var myswitch = $(&quot;select#bar&quot;);<br />	myswitch[0].selectedIndex = 1;<br />	myswitch .slider(&quot;refresh&quot;);</pre>
</div>
</div>
                
<hr /> 
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



